"use client";

import { ResponsiveModal } from "@/components/responsive-modal";
import { Button } from "@/components/ui/button";
import { trpc } from "@/trpc/client";
import { Loader2Icon, PlusIcon } from "lucide-react";
import { toast } from "sonner";
import StudioUploader from "./studio-uploader";

const StudioUploadModal = () => {
  const utils = trpc.useUtils();
  const create = trpc.videos.create.useMutation({
    onSuccess: () => {
      toast.success("Video created");
      utils.studio.getMany.invalidate();
    },
    onError: () => {
      toast.error("Error creating video");
    },
  });

  const onSuccess = () => {
    // if (!create.data?.video?.id) return;
    // create.reset();
  };

  return (
    <>
      <ResponsiveModal
        title="Upload a video"
        open={!!create.data?.url}
        onOpenChange={() => create.reset()}
      >
        <StudioUploader endpoint={create.data?.url} onSuccess={onSuccess} />
      </ResponsiveModal>
      <Button variant="secondary" onClick={() => create.mutate()}>
        <PlusIcon />
        Create
      </Button>
    </>
  );
};

export default StudioUploadModal;
